/**
 * 渲染页面内容及样式
 * */

/**
 * 监听页面载入动画，结束后清除样式
 * */
$('.advertList img:first-child').on('webkitAnimationEnd', function () {
    $(this).removeClass('animate__animated', 'animate__fadeInUp', 'animate__delay-0.8s');
});

/**
 * 设置左侧浮动栏
 * */
let height = 40;
let sideLeft = $('.asideLeft li');
sideLeft.each((i, v) => {
    $(v).css('backgroundPositionY', height + 'px');
    height += 40;
});

/**
 * 左侧楼层跳转
 * */
sideLeft.on('click', function () {
    window.scrollTo({
        top: ($('.floor').eq($(this).index()).offset().top) - 28,
        behavior: 'smooth'
    });
});

/**
 * section标题文字变色
 * */
let section = ['#FFBD0D', '#7A45E5', '#F770CF', '#00B262'];
document.querySelectorAll('.secTop p').forEach((v, i) => v.style.background = section[i]);

/**
 * section左侧内容超链接
 * */
let asideColor = ['rgba(255,189,13,.5)', 'rgba(122,69,229,.5)', 'rgba(247,112,207,.5)', 'rgba(0,178,98,.5)'];
$('.asideLeft li').on({
    'mouseover': function () {
        let index = $(this).index();
        $(this).css('backgroundColor', asideColor[index]);
        $(this).css('background-position-x', '-40px');
    },
    'mouseout': function () {
        $(this).css('background-color', '');
        $(this).css('background-position-x', '0');
    },
});


/**
 * 页面交互效果
 * */

/**
 * 分类导航
 * */
let sideSpan = $('.classify span');
let subNav = $('.subNav');
sideSpan.on('mouseover', function () {
    sideSpan.removeClass('bg');
    $(this).addClass('bg');
    // 获取到隐藏的导航栏
    subNav.stop(true, false).removeClass('show');
    $(this).next().stop(true, false).addClass('show');
});
subNav.on('mouseover', function () {
    sideSpan.stop(true, false).removeClass('bg');
    $(this).prev().stop(true, false).addClass('bg');
    subNav.removeClass('show');
    $(this).addClass('show');
});
$('.classify').on('mouseout', () => {
    sideSpan.removeClass('bg');
    subNav.removeClass('show');
});

/**
 * 导航轮播图
 * */
new Swiper('.swp1', {
    pagination: '.swpa1',
    paginationClickable: true,
    autoplayDisableOnInteraction: false,
    loop: true,
    autoplay: 4000,
    speed: 1000,
    effect: 'slide',
    grabCursor: false,
});

/**
 * 秒杀轮播图
 * */
new Swiper('.swp2', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 3,
    centeredSlides: 0,
    spaceBetween: 16,
    autoplayDisableOnInteraction: false,
    autoplay: 4000,
    speed: 900,
    loop: true,
    effect: 'coverflow',
    grabCursor: true,
});

/**
 * section轮播图
 * */
new Swiper('.swp3', {
    loop: true,
    autoplay: 4000,
    speed: 1000,
    autoplayDisableOnInteraction: false,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    effect: 'fade',
});
new Swiper('.swp4', {
    loop: true,
    autoplay: 4000,
    speed: 1000,
    autoplayDisableOnInteraction: false,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    effect: 'fade',
});
new Swiper('.swp5', {
    loop: true,
    autoplay: 4000,
    speed: 1000,
    autoplayDisableOnInteraction: false,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    effect: 'fade',
});
new Swiper('.swp6', {
    loop: true,
    autoplay: 4000,
    speed: 1000,
    autoplayDisableOnInteraction: false,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    effect: 'fade',
});

/**
 * 倒计时
 * */
function calTime() {
    let timeList = document.querySelectorAll('.time b');
    let hours, minutes, seconds, count = 324e2;
    function calculation() {
        hours = Math.floor(count / 36e2);
        minutes = Math.floor(count % 36e2 / 60);
        seconds = Math.floor((count % 36e2 / 60 - minutes) * 60);
        let arr1 = [backTime(hours), backTime(minutes), backTime(seconds)];
        timeList.forEach((v, i) => v.innerHTML = arr1[i]);
        count--;
        function backTime(val) {
            return val < 10 ? '0' + val : val;
        }
    }
    calculation();
    setInterval(calculation, 1000);
}

calTime();

/**
 * section选项卡切换
 * */
let secOnes = document.querySelectorAll('.sec-one span');
let tabOnes = document.querySelectorAll('.tabOne ul');
let secTwos = document.querySelectorAll('.sec-two span');
let tabTwos = document.querySelectorAll('.tabTwo ul');
let secThrs = document.querySelectorAll('.sec-Thr span');
let tabThrees = document.querySelectorAll('.tabThree ul');
let secFours = document.querySelectorAll('.sec-four span');
let tabFours = document.querySelectorAll('.tabFour ul');

function tabChange(sec, con) {
    sec.forEach((v, i) => {
        v.addEventListener('mouseover', () => {
            con.forEach(val => val.style.display = 'none');
            con[i].style.display = 'block';
        });
    });
}

tabChange(secOnes, tabOnes);
tabChange(secTwos, tabTwos);
tabChange(secThrs, tabThrees);
tabChange(secFours, tabFours);

/**
 * 滚动条事件
 * */
let asideLeft = document.querySelector('.asideLeft');
let asideRight = document.querySelector('.asideRight');
let backT = document.querySelector("#backBtn");
window.onscroll = function () {
    scrollY > 500 ? backT.style.opacity = "1" : backT.style.opacity = "0";
    backT.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });

    /**
     * 显示隐藏左侧浮动栏、显示隐藏右侧浮动栏、改变右侧浮动栏颜色
     * */
    scrollY >= 1900 && scrollY <= 3888 ? asideLeft.style.display = "block" : asideLeft.style.display = "none"
    scrollY >= 412 && scrollY <= 3888 ? asideRight.style.display = "block" : asideRight.style.display = "none"
    scrollY >= 784 && scrollY <= 1640 ? asideRight.style.background = "#F4F4F4" : asideRight.style.background = "#fff"
};

let animates = 'animate__animated animate__fadeInUp animate__delay-0.8s';
$(window).on('scroll', () => {
    let scrTops = $(window).scrollTop();
    if (scrTops > 80) $('.banner').addClass(animates);
    if (scrTops > 320) $('.count').addClass(animates);
    if (scrTops > 650) $('.everyTit').addClass(animates);
    if (scrTops > 850) $('.rem-left,.rem-right').addClass(animates);
    if (scrTops > 1450) $('.conLeft:eq(0),.carOne:eq(0),.carTwo:eq(0),.conTab:eq(0)').addClass(animates);
    if (scrTops > 2050) $('.conLeft:eq(1),.carOne:eq(1),.carTwo:eq(1),.conTab:eq(1)').addClass(animates);
    if (scrTops > 2650) $('.conLeft:eq(2),.carOne:eq(2),.carTwo:eq(2),.conTab:eq(2)').addClass(animates);
    if (scrTops > 3250) $('.conLeft:eq(3),.carOne:eq(3),.carTwo:eq(3),.conTab:eq(3)').addClass(animates);
});
$('.advertList img').addClass(animates);
